<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<meta charset="utf-8">
	<style type="text/css">
		.fu{
			width:600px;
			height: 400px;
			border:2px solid green;
		}
		.first,.second,.third{
			width:400px;
			height: 100px;
			margin-top:10px;
		}
		.first{ background: red; }
		.second{ background: green; }
		.third{ background: blue; }

	</style>
</head>
<body>
	<div class="fu">
		<div class="first">1111</div>
		<div class="second">22222</div>
		<div class="third">3333333</div>
	</div>
	<!-- 要点： 
		1.只写定位，不写偏移量时，元素位置无变化
		2.方向表示离哪边的距离，正值往相反移动，负值同方向移动
		
		3.取值relative时相对自己原来的位置移动，原来位置保留，仍在标准文档流中

		4.取值absolute时 以离他最近 有定位 的祖先元素 为基准定位，3个条件必须同时满足，缺任何一个都会以浏览器为基准定位，很少用，一般都会在其父级标签上加相对定位，子绝父相
		5.绝对定位的元素会脱离标准文档流，自己原来的位置消失

		6.固定定位fixed以浏览器窗口为基准定位，脱离标准文档流，自己原来的位置消失，页面中的广告栏，导航栏，搜索栏常用固定定位

		7.z-index解决元素重叠时的层次的问题，取值为整数，默认值是0，包括负整数
		8.一个元素有定位，一个元素没有定位，两个有重叠有定位显示在上
		9.一个元素相对定位，另一个绝对定位，还有一个固定定位，不改变z-index值时，如果重叠了，固定定位最上面，绝对定位在中间，相对定位最下面
		10.都有定位时，z-index的值越大，越显示在上层

		11.项目中用绝对定位还是相对定位，取决于被定位元素的原位置是否还要保留，要保留就用相对定位，不保留就用绝对定位-->
</body>
</html>